<template>
	<div id="Main">
		<!-- 顶部导航 -->
		<div class="topNav">
			<el-menu ref="topMenu" class="myTopMenu" mode="horizontal" background-color="#3F9EFE" text-color="#fff" active-text-color="#ffd04b">
				<!-- 系统名称 -->
				<div class="sysDiv">
          <img style="width: 35px" :src="platformData.iconSubFileURL" />
					<span>{{ platformData.name }}</span>
				</div>
				<!-- 用户中心按钮组 -->
				<div class="usersDiv">
					<el-avatar v-if="loginData.staff.staffPhotoFileThURL==null" icon="el-icon-user-solid"></el-avatar>
					<el-avatar v-else :src="loginData.staff.staffPhotoFileThURL"></el-avatar>
					<el-submenu index="2">
						<template slot="title">
							{{ loginData.user.userName }}
						</template>
						<el-menu-item index="2-1">个人中心
							<span v-if="loginData.staff.name!=null">(已实名：{{ loginData.staff.name }})<i style="color:green;" class="el-icon-success"></i></span>
							<span v-else>(未实名)<i style="color:red;" class="el-icon-circle-close"></i></span>
						</el-menu-item>
						<el-menu-item index="2-2" @click="outLogin">退出账号</el-menu-item>
					</el-submenu>
				</div>
			</el-menu>
		</div>
		<!-- 核心 -->
		<div class="mainDiv">
			<!-- 菜单 -->
				<el-menu class="leftMenu" :unique-opened="true" default-active="2" :router="true" :collapse="menuZdState">
					<el-menu-item>
						<i class="el-icon-menu"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-submenu v-for="(item,i)  in loginData.menuTreeData" :key="item.menuID" :index="item.menuID">
						<template slot="title">
							<i v-if="item.iconStr" :class="item.iconStr"></i>
							<span>{{ item.name }}</span>
						</template>
						<el-menu-item  v-for="(son,c) in item.children" :key="son.menuID" :index="son.urlPath"><i v-if="son.iconStr" :class="son.iconStr"></i>{{ son.name }}</el-menu-item>
					</el-submenu>
				</el-menu>
			<!-- 菜单折叠栏 -->
			<div class="zdDiv" @click="menuZdState=!menuZdState">
				<i :class="menuZdState==false?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"></i>
			</div>
			<!-- 视窗 -->
			<div class="viewDiv">
				<!-- 面包屑 -->
				<div class="mbx">
					<el-breadcrumb class="mbx" separator="/">
						<el-breadcrumb-item :key="index" v-for="(item, index) in getRouters" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<!-- 显示主窗体 -->
				<div class="viewMainDiv">
					<div class="show" id="mainFrame">
						<transition name="slide-left" mode="out-in">
							<router-view />
						</transition>
					</div>
				</div>
				<!-- 底部导航 -->
				<div class="bottomDiv" v-html="platformData.coypRightText">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import * as platformAPI from "@/api/platform.js";
export default {
	name: 'Main',
	data() {
		return {
			//登录人信息
			loginData: {
				user:{
					userName:null
				},
				staff:{
					name:null
				}
			},
			//菜单折叠状态
			menuZdState:false,
			//平台信息
			platformData:{
        name:null,
        coypRightText:null,
        iconSubFileURL:null
      },
			//用户头像
			staffFileURL:null
		};
	},
	mounted: function() {
    this.getSysData();
		this.loginData = JSON.parse(window.localStorage.getItem('user'));
	},
	computed: {
		getRouters() {
			var mbxList = [];

			for (var i in this.$route.matched) {
				// if (i == 0) {
				// 	continue;
				// }
				var temp = {
					title: this.$route.matched[i].meta.name,
					path: this.$route.matched[i].path
				};
				mbxList.push(temp);
			}

			//console.dir(mbxList);
			return mbxList;
		}
	},
	methods: {
		//退出账号
		outLogin(){
			window.localStorage.removeItem("token");
			window.localStorage.removeItem("user");
			this.$router.push('/')
		},
    // 获取平台信息
    getSysData(){
      let _this = this;
      platformAPI.getData()
        .then(function(res){
          if(res.code =="0000"){
            _this.platformData = res.data;
          }
        });
    },
	}
};
</script>

<style scoped>
#Main {
	padding: 0px;
	margin: 0px;
	width: 100vw;
	height: 100vh;
}

.topNav {
	height: 60px;
	width: 100%;
	float: left;
	background-color: #3f9efe;
}

.myTopMenu {
	height: 100%;
	border-color: #3f9efe;
}



.mainDiv {
	height: calc(100% - 60px);
	width: 100%;
	float: left;
	display: flex;
}

.leftMenu:not(.el-menu--collapse) {
    width: 215px;
	min-width: 215px;
}



.zdDiv{
	width: 10px;
	height: 100%;
	background-color: #fafafa;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	opacity: 0;
	transition-duration: 0.5s;
}

.zdDiv:hover{
	opacity: 1;
}

.viewDiv {
	flex-grow: 1;
}

.usersDiv {
	float: right;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sysDiv{
	float: left;
	display: flex;
	height: 100%;
	width: auto;
	justify-content: center;
	align-items: center;
	color:white;
	font-weight: 900;
	font-size: 25px;
	letter-spacing:2px;
}

.mbx{
	width: 100%;
	height: 20px;
	background-color: white;
	float: left;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-left: 6px;
	box-shadow: 6px 1px 5px 0 rgb(0 0 0 / 10%)
}

.viewMainDiv{
	width: 100%;
	height: calc(100% - 50px);
	float: left;
	box-sizing: border-box;
}

.bottomDiv{
	width: 100%;
	height: 30px;
	background-color: white;
	float: left;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-left: 6px;
	color: #bdbdbd;
}

.show{
	width: calc(100% - 8px);
	height: calc(100% - 16px);
	box-sizing: border-box;
	margin: 8px 8px 8px 0px;
	border-radius: 5px;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	padding: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 1.5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-track {
    background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    border: 0;
}

.slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px, 0px);
    transform: translate(30px, 0px);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(30px, 0px);
    transform: translate(30px, 0px);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }

  /deep/ .el-avatar--circle>img {
      width: 100% !important;
  }

</style>
